.preview-meeting {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    background: #333;

    body.theme-dark &,
    .theme-dark-forced & {
        background: #000;
    }

    body.theme-dark .start-meeting-preview & {
        background: #222;
    }

    video {
        display: none;
        width: 100%;
        height: 100%;
        object-fit: cover;

        &.streaming {
            display: block;
        }
    }

    .preview-video-overlay {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: 1;
    }

    .avatar-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        margin: -30px 0 0 0;
        border-radius: 50%;

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .avatar-guest {
        width: 100%;
        height: 100%;

        i {
            display: block;
            position: absolute;
            top: 45%;
            left: 50%;
            width: 120px;
            height: 120px;
            transform: translate(-50%, -65%);
        }
    }

    &-controls {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 8px 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.3);

        .preview-control-wrapper {
            position: relative;
            width: 70px;
            box-sizing: border-box;
            text-align: center;

            .signal-issue-background {
                top: -6px;
                right: -14px;
            }
        }

        button.preview-meeting-control {
            display: inline;
            background: transparent;
            box-shadow: none;

            &:hover {
                background: #333;
            }

            &.with-fill {
                background: var(--secondary-white);

                i { --mask-color: var(--icon-active); }
            }

            i {
                margin: 0 auto;
                --icon-size: 24px;
                --mask-color: var(--secondary-white);
            }
        }

        span {
            display: block;
            margin: 6px 0 0 0;
            font: var(--text-body2);
            color: var(--secondary-white);
        }
    }
}

